<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
	<title>Widget - Pagination Demo</title>

	<!--Required-->
	<script src="js/jquery-1.10.2.js"></script>
	<script src="js/jquery.widget.min.js"></script>
	<script type="text/javascript" src="js/pagination.js"></script>
	<link type="text/css" href="css/pagination.css" rel="stylesheet">
</head>
<body>

<div id="container" style="">

	<div id="header" style="background-color:#FFA500;">
		<h1 style="margin-bottom:0;">Pagination Widget</h1></div>
	<div id="menu" style="background-color:#fcfbfe;width:25%;float:left;">
		<fieldset>
			<legend>Options</legend>
			<div>
				<div style="margin-top: 1em;">
					pageCount:
					<button name="pageCount" onclick="valueOnChange()">-</button>
					<label><input type="text" id="pageCount" style="width: 30%;" value="16"></label>
					<button name="pageCount" onclick="valueOnChange()">+</button>
				</div>
				<div style="margin-top: 1em;">
					pageIndex:
					<button name="pageIndex" onclick="valueOnChange()">-</button>
					<label><input type="text" id="pageIndex" style="width: 30%" value="6"></label>
					<button name="pageIndex" onclick="valueOnChange()">+</button>
				</div>
				<div style="margin-top: 1em;">
					leftRightTagCount:
					<button name="leftRightTagCount" onclick="valueOnChange()">-</button>
					<label><input type="text" id="leftRightTagCount" style="width: 20%" value="1"></label>
					<button name="leftRightTagCount" onclick="valueOnChange()">+</button>
				</div>
				<div style="margin-top: 1em;">
					currentNearbyTagCount:
					<button name="currentNearbyTagCount" onclick="valueOnChange()">-</button>
					<label><input type="text" id="currentNearbyTagCount" style="width: 15%" value="1"></label>
					<button name="currentNearbyTagCount" onclick="valueOnChange()">+</button>
				</div>
				<div style="margin-top: 1em;">
					<label>givenShowCount:<input type="text" id="givenShowCount" style="width: 30%" value="0"></label>
					<button onclick="valueOnChange()">OK</button>
				</div>
				<div style="margin-top: 1em;">
					<label>preNodeValue:<input type="text" id="preNodeValue" style="width: 30%" value="<"></label>
					<button onclick="valueOnChange()">OK</button>
				</div>
				<div style="margin-top: 1em;">
					<label>nextNodeValue:<input type="text" id="nextNodeValue" style="width: 30%" value=">"></label>
					<button onclick="valueOnChange()">OK</button>
				</div>
				<div style="margin-top: 1em;">
					<label>lineSpaceValue:<input type="text" id="lineSpaceValue" style="width: 30%" value="..."></label>
					<button onclick="valueOnChange()">OK</button>
				</div>
			</div>
		</fieldset>

	</div>

	<div id="content" style="background-color:#EEEEEE;width:65%;min-height: 325px;float:left;">
		<div style="width: 100%;" id="page-List"></div>
		<div style="width: 100%;" id="page-Widget"></div>
		<hr>
		<div style="width: 100%;" id="page-Widget1"></div>
		<div style="width: 100%;" id="page-Widget2"></div>
		<div style="width: 100%;" id="page-Widget3"></div>
		<hr>
		<fieldset>
			<legend>Left Options to Config this pagination</legend>
			<div id="config">
				<div style="width: 100%;" id="page-Widget4"></div>
			</div>
		</fieldset>
	</div>
	<div style="width: 10%;float:left">
		123
		456
		789
	</div>

	<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
		Copyright © gyx8899
	</div>

</div>
<script type="text/javascript">
	function valueOnChange(e) {
		e = e || window.event;
		var obj = e.target || e.srcElement;
		console.log(obj.name);
		if (obj.name.length > 0) {
			var id = '#' + obj.name;
			if (obj.textContent == '-') {
				$(id).val(parseInt($(id).val()) - 1 > 0 ? parseInt($(id).val()) - 1 : parseInt($(id).val()));
			} else if (obj.textContent == '+') {
				$(id).val(parseInt($(id).val()) + 1);
			}
		}

		initPage();
	}
	function initPage() {
		var pageCount = $("input[id='pageCount']");
		var pageIndex = $("input[id='pageIndex']");
		var leftRightTagCount = $("input[id='leftRightTagCount']");
		var currentNearbyTagCount = $("input[id='currentNearbyTagCount']");
		var givenShowCount = $("input[id='givenShowCount']");
		var preNodeValue = $("input[id='preNodeValue']");
		var nextNodeValue = $("input[id='nextNodeValue']");
		var lineSpaceValue = $("input[id='lineSpaceValue']");

		var configDiv = $("#config");
		configDiv.children(":last-child").removeClass('pagination').remove();

		configDiv.html(configDiv.html() + "<div id=\"page-Widget4\"></div>");
		$("#page-Widget4").pagination({
			pageCount: parseInt(pageCount.val()),
			pageIndex: parseInt(pageIndex.val()),
			leftRightTagCount: parseInt(leftRightTagCount.val()),
			currentNearbyTagCount: parseInt(currentNearbyTagCount.val()),
			givenShowCount: parseInt(givenShowCount.val()),  //固定长度，
			preNodeValue: preNodeValue.val(),
			nextNodeValue: nextNodeValue.val(),
			lineSpaceValue: lineSpaceValue.val()
		});
	}

	function refreshListData(contents) {
		var pageList = $("#page-List");
		pageList.empty();
		for (var i = 0; i < contents.length; i++) {
			var divVar = $("<li></li>");
			divVar.html(contents[i].name);
			pageList.append(divVar);
		}
	}
	function refreshPagination(pageSize, pageNum) {

		var dataUrl = "http://app35.neulion.cn/category/archives?format=json&ps=" + pageSize + "&pn=" + pageNum;
		$.ajax({
			url: dataUrl,	 //请求的url地址
			dataType: "jsonp",	//返回格式为json
			async: true,//请求是否异步，默认为异步，这也是ajax重要特性
			type: "GET",	//请求方式
			success: function (req) {
				//请求成功时处理
				var resultPaging = req.paging;
				var pageWidget = $("#page-Widget");
				if ($("#page-Widget *").size() == 0) {
					pageWidget.pagination({
						pageCount: resultPaging.totalPages,
						pageIndex: resultPaging.pageNumber,
						leftRightTagCount: 0,
						currentNearbyTagCount: 3,
						givenShowCount: 0,
						preNodeValue: '<<',
						nextNodeValue: '>>',
						lineSpaceValue: '',
						pagechange: function (event, data) {
							//							 alert( "Callbacks are great! :Index "+ data.pageIndex);
							refreshPagination(pageSize, data.pageIndex);
						}
					}).bind("paginationpagechange", function (event, data) {
						//						  alert( "Bind Method. Index: " + data.pageIndex );
					});
				} else {
					pageWidget.pagination("updatePage", resultPaging.pageNumber, resultPaging.totalPages);
				}
				refreshListData(req.programs);
			},
			error: function () {
				//请求出错处理
			}
		});
	}
	$(function () {
		refreshPagination(3, 1);
		$("#page-Widget1").pagination({
			pageCount: 16,
			pageIndex: 6
		});
		$("#page-Widget2").pagination({
			pageCount: 10,
			pageIndex: 3,
			leftRightTagCount: 2,
			currentNearbyTagCount: 2,
			preNodeValue: '上一页',
			nextNodeValue: '下一页',
			pagechange: function (event, data) {
				alert("2.Callbacks are great! Index: " + data.pageIndex);
			}
		}).bind("paginationpagechange", function (event, data) {
			alert("1.Bind Method. Index: " + data.pageIndex);
		});
		$("#page-Widget3").pagination({
			pageCount: 19,
			pageIndex: 4,
			leftRightTagCount: 0,
			currentNearbyTagCount: 3,
			givenShowCount: 7,
			preNodeValue: '<<',
			nextNodeValue: '>>',
			lineSpaceValue: ''
		});
		initPage();
	});


</script>
</body>
</html>
